<template>
  <div>
    <div style="margin: 20px;">
        <el-card style="max-width: 100%;height: 100%;">
            <el-form :inline="true" :model="selectModel" class="demo-form-inline" style="margin-left: 50px;">
                <el-form-item label="分类">
                    <el-select v-model="selectModel.newsType" placeholder="请选择分类">
                        <el-option label="党建新闻" value="0" />
                        <el-option label="政策法规" value="1" />
                        <el-option label="通知公告" value="2" />
                        <el-option label="行业信息" value="3" />
                        <el-option label="会员动态" value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="selectModel.title" placeholder="请输入标题" clearable />
                </el-form-item>
                <el-form-item label="来源">
                    <el-input v-model="selectModel.source" placeholder="请输入来源" clearable />
                </el-form-item>
                <el-form-item label="是否置顶">
                    <el-select v-model="selectModel.topFlag" placeholder="请选择是否置顶">
                        <el-option label="不置顶" value="0" />
                        <el-option label="置顶" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="selectModel.status" placeholder="请选择状态">
                        <el-option label="暂存" value="0" />
                        <el-option label="发布" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="newsList">查询</el-button>
                    <el-button type="primary" @click="reoload">重置</el-button>
                </el-form-item>
            </el-form>

            <el-button type="primary" style="margin-left: 50px;" @click="open()"><el-icon><Plus /></el-icon>新增</el-button>

            <div style="margin-top: 20px; overflow-x: auto; width: 100%; margin-left: 50px;">
                <el-table :data="bsNews" border stripe style="width: fit-content">
                    <el-table-column prop="newsType" label="分类" :min-width="150">
                        <template #default="{ row }">
                            <el-text class="mx-1">{{ getTypeText(row.newsType) }}</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" :min-width="250" />
                    <el-table-column prop="thumbnail" label="缩略图" width="100">
                        <template #default="{ row }">
                        <el-image
                            v-if="row.thumbnail"
                            :src="row.thumbnail"
                            fit="cover"
                            style="width: 50px; height: 50px; cursor: pointer;"
                            @click="previewImage(row.thumbnail)"
                        />
                        </template>
                    </el-table-column>
                    <el-table-column prop="source" label="来源" :min-width="170"/>
                    <el-table-column prop="read_num" label="浏览量" :min-width="170" />
                    <el-table-column prop="topFlag" label="是否置顶" :min-width="150" >
                        <template #default="{ row }">
                            <el-tag :type="getStatusTagType(row.topFlag)">
                                {{ getTopLabel(row.topFlag) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" :min-width="150" >
                        <template #default="{ row }">
                        <el-tag :type="getStatusTagType(row.status)">
                            {{ getStatusLabel(row.status) }}
                        </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="170">
                        <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="open(row)">编辑</el-button>
                        <el-button link type="primary" size="small">更多</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px;">
                <el-pagination
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    layout="total,prev, pager, next, jumper"
                    :total="total"
                    @current-change="handleCurrentChange"
                />
                </div>
            </div>

            <bs-news-edit-form ref="newsForm"></bs-news-edit-form>
        </el-card>
      
    </div>

    <bs-member-form ref="memberForm" @refresh="refresh" />
  </div>
</template>

<script setup lang="ts">
    import { computed, ref ,useTemplateRef} from 'vue'
    import { ElMessage, ElMessageBox } from "element-plus";
    import BsMemberForm from "../../components/BsMemberForm.vue";
    import BsNewsEditForm from '../../components/BsNewsEditForm.vue';
    import {Plus} from '@element-plus/icons-vue'


    //新闻数据模型
    const bsNews = ref()


    //搜索数据模型
    const selectModel = ref({
        "newsType":"",
        "title":"",
        "source":"",
        "topFlag":null,
        "status":null,
    })

    const pageNum = ref(1)
    const pageSize = ref(6)
    const total = ref(0)

    import { newsPageGetService } from '../../api/guild/bsNews.js';
    const newsList = async()=>{
        let result = await newsPageGetService(pageNum.value,pageSize.value,selectModel.value)
        bsNews.value = result.data.data.data
        total.value = result.data.data.total
        console.log(bsNews.value)
    }
    newsList()

    const handleCurrentChange =()=>{
        newsList()
    }

    //状态方法
    //设置标签类型
    function getStatusTagType(status: number): string {
    switch (status) {
        case 0:
        return 'danger';
        case 1:
        return 'success';
        default:
        return '';
    }
    }
    // 控制状态数据转换
    function getStatusLabel(status: number): string {
        switch (status) {
            case 0:
            return '暂存';
            case 1:
            return '发布';
            default:
            return '';
        }
    }
   // 控制置顶数据转换
    function getTopLabel(status: number): string {
        switch (status) {
            case 0:
            return '不置顶';
            case 1:
            return '置顶';
            default:
            return '';
        }
    }

    const getTypeText = (type)=>{
        switch (type) {
            case 0:
            return '党建新闻';
            case 1:
            return '政策法规';
            case 2:
            return '通知公告';
            case 3:
            return '行业信息';
            case 4:
            return '会员动态';
            default:
            return '';
        }
    }


    //重置查询
    const reoload = ()=>{
        selectModel.value.newsType = "",
        selectModel.value.source = "",
        selectModel.value.title = "",
        selectModel.value.status = null,
        selectModel.value.topFlag = null
        newsList()
    }

    //编辑动态的方法
    let newsForm = useTemplateRef('newsForm')
    const open = (row)=>{
        newsForm.value?.open(row)
    }
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}


.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
